<script>
import {Search} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import request from "../../utils/Request.js";
import {
  Like,
  PreviewOpen,
} from "@icon-park/vue-next";


export default {
  name: "Discover",
  computed: {
    Search() {
      return Search
    }
  },
  components: {Like, PreviewOpen},
  data() {
    return {
      keyword: '',
      projectOptionsVisible: new Array(18).fill(false),
      projects: [
        {
          id: 1,
          name: '柿子文档',
          description: '一个柿子文档',
          coverUrl: 'null',
          userName: 'asdasd'
        }, {
          id: 2,
          name: '柿子文档',
          description: '一个柿子文档',
          coverUrl: 'null',
          userName: 'asdasd'
        }, {
          id: 3,
          name: '柿子文档',
          description: '一个柿子文档',
          coverUrl: 'null',
          userName: 'asdasd'
        }
      ],
      isLikes: [],
      currentPage: 1,
      pageSize: 18,
      total: 18,
      totalPage: 1
    }
  }
  ,
  methods: {
    openProjectView(projectId) {
      const {href} = this.$router.resolve('/v/' + projectId)
      window.open(href, '_blank')
    },
    setProjectOptionsVisible(index, isVisible) {
      this.projectOptionsVisible[index] = isVisible;
    },
    getHotProjects(page) {
      request({
        method: 'post',
        url: '/api/search/search/hot',
        params: {
          page: page
        }
      })
          .then(({data}) => {
            if (data.code === 0) {
              this.projects = data.data.projectSearchList
              this.total = data.data.total
              this.totalPage = data.data.totalPage
              this.currentPage = data.data.currentPage
              this.pageSize = data.data.pageSize
              this.getIsLikeList(this.projects)
            } else {
              ElMessage.error(data.msg)
            }
          })
    },

    getProjectsByKeyword(page, keyword) {
      request({
        method: 'post',
        url: '/api/search/search',
        params: {
          page: page,
          keyword: keyword
        }
      })
          .then(({data}) => {
            if (data.code === 0) {
              this.projects = data.data.projectSearchList
              this.total = data.data.total
              this.totalPage = data.data.totalPage
              this.currentPage = data.data.currentPage
              this.pageSize = data.data.pageSize
              this.getIsLikeList(this.projects)
            } else {
              ElMessage.error(data.msg)
            }
          })
    },

    getIsLikeList(projectSearchList) {
      let projectIdList = []
      for (let i = 0; i < projectSearchList.length; i++) {
        projectIdList.push(projectSearchList[i].id)
      }
      request({
        method: 'post',
        url: '/api/project/like/isLike',
        data: projectIdList
      })
          .then(({data}) => {
            if (data.code === 0) {
              this.isLikes = data.data
            } else {
              ElMessage.error(data.msg)
            }
          })
    },

    getProjects(page, keyword) {
      if (keyword == null || keyword === '') {
        this.getHotProjects(page)
      } else {
        this.getProjectsByKeyword(page, keyword)
      }
    },

    likeOrProject(projectId, index) {
      if (this.isLikes[index]) {
        // 取消点赞
        request({
          method: 'post',
          url: '/api/project/like/unlike/' + projectId,
        })
            .then(({data}) => {
              if (data.code === 0) {
                this.isLikes[index] = false
                this.projects[index].likeCount -= 1
              } else {
                ElMessage.error(data.msg)
              }
            })
      } else {
        // 点赞
        request({
          method: 'post',
          url: '/api/project/like/like/' + projectId,
        })
            .then(({data}) => {
              if (data.code === 0) {
                this.isLikes[index] = true
                this.projects[index].likeCount += 1
              } else {
                ElMessage.error(data.msg)
              }
            })
      }
    }
  },

  created() {
    this.getHotProjects(1)
  }
}
</script>

<template>
  <el-card style="width: 80%; height: 100vh" class="center_center">

    <el-row class="center_center">
      <el-text size="large" style="color: #303133; font-weight: bold; ">
        <span style="font-size: 36px">
        发&nbsp;&nbsp;现
      </span>
      </el-text>
    </el-row>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <el-row class="center_center">

      <el-input
          v-model="keyword"
          placeholder="请输入关键词"
          style="width: 500px;"
          size="large"
      >
        <template #append>
          <el-button :icon="Search" @click="getProjects(1, keyword)"/>
        </template>
      </el-input>

    </el-row>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <el-row :gutter="50" style="margin-left: 20px; margin-right: 20px">

      <el-col :span="4" v-for="(project, index) in projects"
              :key="project.id">
        <el-card :body-style="{ padding: '0', height: '256px'}" class="mb-20 wp-100 pointer custom-card" shadow="hover"
                 @mouseover="setProjectOptionsVisible(index, true);"
                 @mouseleave="setProjectOptionsVisible(index, false)"
        >
          <div class="project-cover">
            <el-image
                :src="project.coverUrl == null ? '/default_project_cover.png' : project.coverUrl"
                fit="cover"
                class="wp-100 hp-100"
                @click='openProjectView(project.id)'
            >
              <template #error>
                <el-image fit="cover"
                          class="wp-100 hp-100" src="/default_project_cover.png" @click='openProjectView(project.id)'/>
              </template>
            </el-image>
            <div class="project-options" v-show="projectOptionsVisible[index]">
              <el-text type="info" size="small">创建者：{{ project.userName }}</el-text>
            </div>

            <span style="position:absolute; z-index: 10; margin: 5px; left: 10%; bottom: 10%">
              <el-icon>
                <preview-open theme="outline" size="24" fill="#333"/>
                {{ project.readCount }}
              </el-icon>
            </span>

            <span style="position:absolute; z-index: 10; margin: 5px; left: 10%; bottom: 0"
                  @click="likeOrProject(project.id, index)">
              <el-icon v-if="isLikes[index]">
                <Like theme="filled" size="24" fill="#d0021b"/>
                <span style="color: #d0021b;">{{ project.likeCount }}</span>
              </el-icon>
              <el-icon v-else>
                <Like theme="outline" size="24" fill="#333"/>
                {{ project.likeCount }}
              </el-icon>
            </span>

          </div>

          <div class="hp-20 wp-100 pl-5 pr-5 pt-3 ellipsis">
            <el-text type="primary" size="large">
              {{ project.name }}
            </el-text>
            <br/>
            <el-text type="info" size="small">
              {{ project.description }}
            </el-text>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <span style="flex-grow: 1;"></span>
      <el-pagination
          style="margin-right: 10%; margin-top: 10vh"
          layout="prev, pager, next"
          :page-size="pageSize"
          :page-count="totalPage"
          v-model:current-page="currentPage"
          @current-change="(val) => getProjects(val, keyword)"
      />

    </el-row>


  </el-card>

</template>

<style scoped>
.center_center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.project-cover {
  position: relative;
  width: 100%;
  height: 80%;
  display: block;
}

.pointer {
  cursor: pointer;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-card {
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* 设置阴影程度 */
  overflow: hidden;
}

.custom-card:hover {
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.4); /* 设置hover时的阴影程度 */
  z-index: 1; /* 确保卡片在hover时显示在其他元素之上 */
}

.project-options {
  position: absolute;
  top: 0;
  display: flex;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 8%;
  padding: 2%;
}

</style>